<template>
  <el-dialog :visible="visible" :title="'编辑角色'" @close="close" width="30%" :close-on-click-modal="false">
    <el-checkbox-group v-model="chooseRoles">
    <el-checkbox class="step1-item" v-for="role in roleList" :label="role.role_id" :key="role.role_id">{{role.role_name}}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'UserRoleEdit',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    roleList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      chooseRoles: [],
    };
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    },
    async confirm() {
      try {
        this.$emit('confirm',this.chooseRoles);
      } catch (e) {
        console.error(e);
      }
    },
    setChooseRoles (array) {
      this.chooseRoles = [];
      array.forEach(element => {
        if(element.checked===true){
          this.chooseRoles.push(element.role_id);
        }
      });
    }
  },
};
</script>
